<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@include file="/WEB-INF/base.jspf"%>
<style>
/*  #test1 {
	 margin: 2px;  
	 height: 37px;
}

#test2 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
#qblx {
	margin: 2px;
	height: 37px;
}

#zflx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
}

#hymc {
	margin: 2px;
	height: 37px;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
} */

 #date1 {
	 margin: 2px;  
	 height: 37px;
}

#date2 {
	margin: 2px;
	height: 37px;
}
	.modal-dialog {
		max-width: 1000px;
	}
.select-lx {
	margin: 2px;
	height: 37px;
}

.layui-inline {
	height: 100px;
	margin-top:15px;
}

#userName {
	margin: 2px;
	height: 37px;
}
#daili{
 margin: 2px;	
  height:37px;
}
#table_id_example_paginate{
 margin-right:100px;
}
.class-input-pageNumber{
    
	width:40px;
	height:23px;
	position: absolute;
	right:550px;
	top:12px;
}
.class-span-searchBtn{
	height:24px;
	width:36px;
	font-size:14px;
	text-algin:center;
	line-height:25px;
	padding:0!important;
	position: absolute;
	right:500px;
	top:12px;
}
.dataTables_length{
	margin-top:12px;
	margin-left:50px;
}
.tableSearch{
    position: relative;
}
.hidden-c {
	display:none;
}

.btn-c-dealShenQing {
	display:none;
}
table th,table tr,table td {
text-align: center;
vertical-align:middle;
}

</style>
		<div>
			<!--<div class="layui-inline">
 				<div class="layui-inline">
					<input type="text" id="test2" placeholder="2018-1-29"><br> 
					<input type="text" id="test1" placeholder="2018-1-29">
				</div> 
				<div class="layui-inline">
					<input type="text" id="hymc" placeholder="代理账号"> 
					<button class="layui-btn layui-btn-radius">查询</button>
				</div>
			</div> class="layui-body" -->
			<div class="layui-inline">
				<div class="layui-inline">
					<input type="text" id="date1" placeholder="开始时间" value=""><br> 
					<input type="text" id="date2" placeholder="结束时间" value="">
				</div>
				<div class="layui-inline select-lx">
					<input type="text" id="userName" placeholder="会员名称" value=""> 
					<button class="layui-btn layui-btn-radius" id="btn_search" style="margin-left:15px;">查询</button>
					<br>
					<input type="text" id="daili" placeholder="代理名称" value="">
					<button class="layui-btn layui-btn-radius" id="button-i-resetTableContent" style="margin-left:15px;">重置</button>
				</div>
			</div>					
			<div>
				<table id="table-i-dailiList"  class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>会员名称</th>
							<th>消费金额</th>
							<th>返点类型</th>
							<th>订单号</th>
							<th>代理等级</th>
							<th>返点率</th>
							<th>返点金额</th>
							<th>代理名称</th>
							<th>创建时间</th>
						</tr>
					</thead>
					<tbody>
	 					
					</tbody>
				</table>
			</div>

		</div>

	<script>
	var PARENT_TR
	layui.use('laydate', function() {
		var laydate = layui.laydate;
		laydate.render({
			elem : '#date1' 
		});
		laydate.render({
			elem : '#date2'
		});
	});
	</script>
	<script>
	function dataTable01(){
		var oTable=	$("#table-i-dailiList").DataTable({
				 "bProcessing" : false, // 是否显示取数据时的那个等待提示
				"bServerSide" : true,//这个用来指明是通过服务端来取数据
				 "bPaginate" : true, //是否显示分页 
				"sAjaxSource" : "/agents/findAgentRecord.do",//这个是请求的地址
				"fnServerData" : retrieveData, // 获取数据的处理函数
				"destroy":true,
			      // "bPaginate": true,
			       "bLengthChange": true,      
			      "bSort": false,
			      "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
			      // "bInfo": true,
			      "bAutoWidth": false,
//			         "bServerSide":true,
			      'aLengthMenu':[5,10, 20], 
			       "searching": false,  
			       "pagingType": "simple_numbers",
			     
			       
			       "language": {//语言设置  
			            "lengthMenu": "每页显示 _MENU_ 条记录",     
			            "zeroRecords": "没有检索到数据",     
			            "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",     
			            "info": "没有数据",     
			            "oPaginate": {     
			                "sFirst": "首页",     
			                "sPrevious": "前一页",     
			                "sNext": "后一页",     
			                "sLast": "尾页"    
			          	},
			            "search":"",
			            "searchPlaceholder": "请输入关键字",
			            "infoFiltered":   "(从  _MAX_ 记录中搜索出结果)",
			            "infoEmpty":      "没有找到匹配的信息",
			         },  
			         "columnDefs": [{"defaultContent": "",
                          "targets": "_all"}],
                          "columns": [
                        	 	 { "data": "user_name" ,"className": "user_name-td"},
			                     { "data": "consume" ,"className": "consume-td"},
			                     { "data": "rebate_type","className": "rebate_type-td"},
			                     { "data": "order_number","className": "order_number-td" },
			                     { "data": "agent_grade","className": "agent_grade-td"},
			                     { "data": "rebate_ratio","className": "rebate_ratio-td" },
			                     { "data": "rebate_money" ,"className": "rebate_money-td"},
			                     { "data": "agent_name","className": "agent_name-td" },
			                     { "data": "created_time","className": "created_time-td" },
			                 ],	 
			})
function retrieveData(sSource, aoData, fnCallback) {
			$.ajax({
				url : sSource,//这个就是请求地址对应sAjaxSource
				data : {
					"pageCount":aoData[0].value,
					"startIndex":aoData[3].value,
					"lineCount":aoData[4].value,
					 "startDate":$("#date1").val(),
					"endDate":$("#date2").val(),
					"userName":$("#userName").val(),
					"agentName":$("#daili").val(), 
				},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
				type : 'post',
				dataType : 'json',
				async : false,
				 
				success : function(result) { 
					var newData=result.aaData;
					 for(i=0;i<newData.length;i++){
						 item=newData[i];
						 item.agent_grade= item.agent_grade+"级";
						 if(item.rebate_type==1){
							 item.rebate_type="充值返点" 
						 }
						 if(item.rebate_type==2){
							 item.rebate_type="打码返点" 
						 } 	
					 }
					fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
				},
				error : function(msg) {
				}
			});
		}
	}
 dataTable01()
	    
 document.querySelector("#btn_search").addEventListener("click", function(event) {
	 dataTable01()
 })
 
 $("#button-i-resetTableContent").on("click", function(event) {
			$("#date1").val(""),
			$("#date2").val(""),
			$("#userName").val(""),
			$("#daili").val(""),
			dataTable01()
		})

	    
	    
	</script>
